<template>
  <div id="cesiumContainer"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import * as Cesium from "cesium";
import { useCesium } from "../composables";
const { initViewer } = useCesium("cesiumContainer");

let viewer: Cesium.Viewer;
const init = () => {
  viewer = initViewer();

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(117.25969, 31.771558, 180000),
    duration: 0,
  });

  const layer = new Cesium.PrimitiveCollection();
  viewer.scene.primitives.add(layer);

  //   const postions = [116.25, 40, 116.5, 40, 116.25, 40.25, 116, 40.25];
  const postions = [
    117.25969, 31.771558, 117.304611, 31.770763, 117.315107, 31.738031,
  ];

  // const p1 = Cesium.Cartesian3.fromDegrees(116, 40.25);
  // const p2 = Cesium.Cartesian3.fromDegrees(116, 40);
  // const p3 = Cesium.Cartesian3.fromDegrees(116.25, 40);

  // var c1 = Cesium.Cartesian3.subtract(p2, p1, new Cesium.Cartesian3());
  // var c2 = Cesium.Cartesian3.subtract(p3, p1, new Cesium.Cartesian3());
  // var angle = Cesium.Cartesian3.angleBetween(c1, c2);
  // const appearance = new Cesium.MaterialAppearance({
  //   material: new Cesium.Material({
  //     fabric: {
  //       type: "t",
  //       uniforms: {
  //         color: new Cesium.Color(1, 0, 0, 0.5),
  //         angle,
  //       },
  //       source: `
  //           uniform vec4 color;
  //           uniform float angle;
  //          czm_material czm_getMaterial(czm_materialInput materialInput)
  //           {

  //               vec2 st = materialInput.st;
  //               vec4 outColor = color;

  //               vec2 origin = vec2(0.5, 0.5);
  //             float dis = distance(origin, st);
  //               if(dis<=0.01){
  //                  outColor.rgb = vec3(1.0, 0.0, 0.0);
  //               }else if(dis <= 0.5) {
  // 	            outColor.rgb = vec3(0.0, 1.0, 0.0);
  //             }

  //               czm_material material = czm_getDefaultMaterial(materialInput);
  //               material.diffuse = czm_gammaCorrect(outColor.rgb);
  //               material.alpha = 1.  ;
  //               return material;
  //           }
  //           `,
  //     },
  //   }),
  // });

  const appearance = new Cesium.MaterialAppearance({
    material: new Cesium.Material({
      fabric: {
        type: "Image2",
        uniforms: {
          image: "/_20250227140009.png",
        },
        source: `
        // uniform vec4 color_2;
        // uniform vec2 repeat_1;
        uniform sampler2D image;
        czm_material czm_getMaterial(czm_materialInput materialInput)
        {
        czm_material material = czm_getDefaultMaterial(materialInput);
        material.diffuse = czm_gammaCorrect(texture(image, fract(materialInput.st)).rgb); 
        material.alpha = texture(image, fract(materialInput.st)).a; 
        return material;
        }
`,
      },
    }),
    fragmentShaderSource: `
    in vec3 v_positionEC;
    in vec3 v_normalEC;
    in vec2 v_st;

    void main()
    {
        vec3 positionToEyeEC = -v_positionEC;

        vec3 normalEC = normalize(v_normalEC);
    #ifdef FACE_FORWARD
        normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
    #endif

        czm_materialInput materialInput;
        materialInput.normalEC = normalEC;
        materialInput.positionToEyeEC = positionToEyeEC;
        materialInput.st = v_st;
        czm_material material = czm_getMaterial(materialInput);

    #ifdef FLAT
        out_FragColor = vec4(material.diffuse + material.emission, material.alpha);
    #else
        out_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
    #endif
    }
`,
    vertexShaderSource: `
    in vec3 position3DHigh;
    in vec3 position3DLow;
    in vec3 normal;
    in vec2 st;
    in float batchId;

    out vec3 v_positionEC;
    out vec3 v_normalEC;
    out vec2 v_st;

    void main()
    {
        vec4 p = czm_computePosition();

        v_positionEC = (czm_modelViewRelativeToEye * p).xyz;      // position in eye coordinates
        v_normalEC = czm_normal * normal;                         // normal in eye coordinates
        v_st = st;
        gl_Position = czm_modelViewProjectionRelativeToEye * p;
    }
`,
  });

  const polygon = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArray(postions)
        ),
      }),
    }),
    appearance,
  });
  layer.add(polygon);
};

onMounted(() => {
  init();
});
</script>

<style scoped lang="less">
#cesiumContainer {
  height: 100vh;
}
</style>
